<template>
    <div class="rightFx">
        <ThemeTitle :title="title"/>
        <!-- 值班值守 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">值班值守</div>
            </div>
        </div>  
        <!-- 今日值班 -->
        <div class="todayDuty">
            <div class="dutyTitle">
                今日值班
            </div>
            <div  class="dutyLoader">
                <div>
                    <span>值班负责人：</span>
                    <span>张三</span>
                </div>
                <div>
                    <span>值班长：</span>
                    <span>李四</span>
                </div>
            </div>
            <div  class="dutyPerson">
                值班员：王五  赵六 孙七
            </div>
            <div class="selectContent">
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
        </div>
        <!-- 值班统计echart -->
        <div id="dutyChart">
            
        </div>
        <!-- 突发事件处置 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">突发事件处置</div>
            </div>
        </div>
        <!-- 突发事件chart   -->
        <div id="eventChart"></div>
        <!-- 台风次数chart   -->
        <div class="typhoon">
            <div class="typhoonDec">
                <div>应对台风次数</div>
                <div>108次</div>
            </div>
            <div id="typhoonTimes"></div>
        </div>
        
        <!-- 突发事件次数chart   -->
        <div class="event">
            <div class="eventDec">
                <div>突发事件较去年下降</div>
                <div>
                    10.00%
                </div>
            </div>
            <div id="events"></div>
        </div>
        
        <!-- 体制机制建设 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">体制机制建设</div>
            </div>
        </div>  
        <!-- 体制机制建设chart -->
        <div id="buildChart"></div>
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            provide("title", "自然地理"); 
            const {ctx} = getCurrentInstance();
            const numList = [
                2,5,1,3,8,0
            ]
            const carouselList = [
                {imgSrc:"",dec:"海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"",dec:"北以琼州海峡与广东划界，海南省是中华人民共和国最南端的省级行政区，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"",dec:"西临北部湾与广西、越南相对，海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"}
            ]
            let options =  [
                {
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }]
            let optionValue =  '';
            function drawDuty(){
                var dom = document.getElementById("dutyChart");
                var myChart = ctx.$echarts.init(dom);
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69"
                ];
                let echartData = [
                    {
                        name: "1",
                        value1: 100,
                        value2: 233
                    },
                    {
                        name: "2",
                        value1: 138,
                        value2: 233
                    },
                    {
                        name: "3",
                        value1: 350,
                        value2: 200
                    },
                    {
                        name: "4",
                        value1: 173,
                        value2: 180
                    },
                    {
                        name: "5",
                        value1: 180,
                        value2: 199
                    },
                    {
                        name: "6",
                        value1: 150,
                        value2: 233
                    },
                    {
                        name: "7",
                        value1: 180,
                        value2: 210
                    },
                    {
                        name: "8",
                        value1: 230,
                        value2: 180
                    },
                    {
                        name: "9",
                        value1: 150,
                        value2: 233
                    },
                    {
                        name: "10",
                        value1: 180,
                        value2: 210
                    },
                    {
                        name: "11",
                        value1: 230,
                        value2: 180
                    },
                    {
                        name: "12",
                        value1: 230,
                        value2: 180
                    }
                ];

                let xAxisData = echartData.map(v => v.name);
                //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                let yAxisData1 = echartData.map(v => v.value1);
                // [100, 138, 350, 173, 180, 150, 180, 230]
                let yAxisData2 = echartData.map(v => v.value2);
                // [233, 233, 200, 180, 199, 233, 210, 180]
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                }
                let option = {
                    color: color,
                    legend: {
                        right: 10,
                        top: 10,
                        show:false
                    },
                    tooltip: {
                        trigger: "axis",
                        // formatter: function(params) {
                        //     let html = '';
                        //     params.forEach(v => {
                        //         html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                        //         <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:transparent;"></span>
                        //         ${v.seriesName}.${v.name}
                        //         <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                        //         万元`;
                        //     })
                        //     return html
                        // },
                        // extraCssText: 'background: transparent; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                        // axisPointer: {
                        //     type: 'shadow',
                        //     shadowStyle: {
                        //         color: 'transparent',
                        //         shadowColor: 'rgba(225,225,225,1)',
                        //         shadowBlur: 5
                        //     }
                        // }
                    },
                    grid: {
                        top: "10%" ,
                        bottom: "-1%" ,
                        left:'2%',
                        right:'2%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}月',
                            color: "#fff"
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#1b4a6f"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e"
                            },
                            show:true
                        },
                        data: xAxisData
                    }],
                    yAxis: [{
                        type: "value",
                        name: '单位：万千瓦时',
                        axisLabel: {
                            
                                color: "#fff"
                            
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e"
                            },
                            show:true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: "solid",
                                color: "#1b4a6f"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                        name: "2018",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY:0
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: ctx.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.8)
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                // shadowColor: hexToRgba(color[0], 0.1),
                                // shadowBlur: 0
                            }
                        },
                        data: yAxisData1
                    }
                   ]
                };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawEvents(){
                var dom = document.getElementById("eventChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        animation: true,
                        title: {
                            text: "火点类型",
                            // "subtext": "火点类型",
                            x: "31%",
                            y: "center",
                            textStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center",
                                width: "200px"
                            },
                            subtextStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center"
                            }
                        },
                        legend: {
                            width: "30%",
                            left: "right",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            icon: "circle",
                            right: "0",
                            bottom: "0",
                            padding: [10, 30],
                            itemGap: 20,
                            data: ["工厂热源", "秸秆焚烧", "森林火灾", "草原火灾"]
                        },
                        series: [{
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["65%", "90%"],
                            color: ['#2ECACE', '#2039C3', '#0F9AF8', '#2B63D5'],
                            startAngle: 135,
                            labelLine: {
                                normal: {
                                    length: 25
                                }
                            },
                            label: {
                                normal: {
                                    formatter: "{b|{b}:}\n{hr|}\n {per|{d}%} ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 20,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#b3e5ff",
                                            fontSize: 14,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 14,
                                            padding: [5, 8],
                                            borderRadius: 2
                                        }
                                    },
                                    textStyle: {
                                        color: "#fff",
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                show:false,
                                position:[30,50],
                                label: {
                                    show: true,
                                    formatter: "{b|{b}:}  {per|{d}%}  ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 22,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#fff",
                                            fontSize: 18,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 25,
                                            padding: [5, 6],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [{
                                name: "工厂热源",
                                value: 55
                            }, {
                                name: "秸秆焚烧",
                                value: 30
                            }, {
                                name: "森林火灾",
                                value: 10
                            }, {
                                name: "草原火灾",
                                value: 5
                            }
                           
                            ]
                        }, {
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["55%", "57%"],
                            label: {
                                show: false
                            },
                            data: [{
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            // colorStops: [{
                                            //     offset: 0,
                                            //     color: "#9F17FF"
                                            // }, {
                                            //     offset: 0.2,
                                            //     color: "#01A4F7"
                                            // }, {
                                            //     offset: 0.5,
                                            //     color: "#FE2C8A"
                                            // }, {
                                            //     offset: 0.8,
                                            //     color: "#FEE449"
                                            // }, {
                                            //     offset: 1,
                                            //     color: "#00FFA8"
                                            // }],
                                            colorStops: [{
                                                offset: 0,
                                                color: "#fff"
                                            }, {
                                                offset: 0.2,
                                                color: "#fff"
                                            }, {
                                                offset: 0.5,
                                                color: "#fff"
                                            }, {
                                                offset: 0.8,
                                                color: "#fff"
                                            }, {
                                                offset: 1,
                                                color: "#fff"
                                            }]
                                        }
                                    }
                                }
                            }]
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawTyphoon(){
                var dom = document.getElementById("typhoonTimes");
                var myChart = ctx.$echarts.init(dom);
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69"
                ];
                let echartData = [
                    {
                        name: "2015",
                        value1: 100,
                        value2: 233
                    },
                    {
                        name: "2016",
                        value1: 138,
                        value2: 233
                    },
                    {
                        name: "2017",
                        value1: 350,
                        value2: 200
                    },
                    {
                        name: "2018",
                        value1: 173,
                        value2: 180
                    },
                    {
                        name: "2019",
                        value1: 180,
                        value2: 199
                    }
                ];

                let xAxisData = echartData.map(v => v.name);
                //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                let yAxisData1 = echartData.map(v => v.value1);
                // [100, 138, 350, 173, 180, 150, 180, 230]
                let yAxisData2 = echartData.map(v => v.value2);
                // [233, 233, 200, 180, 199, 233, 210, 180]
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                }
                let option = {
                    color: color,
                    legend: {
                        right: 10,
                        top: 10,
                        show:false
                    },
                    tooltip: {
                        trigger: "axis",
                        // formatter: function(params) {
                        //     let html = '';
                        //     params.forEach(v => {
                        //         html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                        //         <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:transparent;"></span>
                        //         ${v.seriesName}.${v.name}
                        //         <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                        //         万元`;
                        //     })
                        //     return html
                        // },
                        // extraCssText: 'background: transparent; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                        // axisPointer: {
                        //     type: 'shadow',
                        //     shadowStyle: {
                        //         color: 'transparent',
                        //         shadowColor: 'rgba(225,225,225,1)',
                        //         shadowBlur: 5
                        //     }
                        // }
                    },
                    grid: {
                        top: "10%" ,
                        bottom: "-1%" ,
                        left:'2%',
                        right:'2%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}月',
                            
                                color: "#fff"
                            
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#1b4a6f"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e"
                            },
                            show:true
                        },
                        data: xAxisData
                    }],
                    yAxis: [{
                        type: "value",
                        name: '单位：万千瓦时',
                        axisLabel: {
                        
                                color: "#fff"
                            
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e"
                            },
                            show:true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: "solid",
                                color: "#1b4a6f"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                        name: "2018",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY:0
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: ctx.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.8)
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1)
                                        }
                                    ],
                                    false
                                ),
                                // shadowColor: hexToRgba(color[0], 0.1),
                                // shadowBlur: 0
                            }
                        },
                        data: yAxisData1
                    }
                   ]
                };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawEventDown(){
                var dom = document.getElementById("events");
                var myChart = ctx.$echarts.init(dom);
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69"
                ];
                let echartData = [
                    {
                        name: "2015",
                        value1: 100,
                        value2: 233
                    },
                    {
                        name: "2016",
                        value1: 138,
                        value2: 233
                    },
                    {
                        name: "2017",
                        value1: 350,
                        value2: 200
                    },
                    {
                        name: "2018",
                        value1: 173,
                        value2: 180
                    },
                    {
                        name: "2019",
                        value1: 180,
                        value2: 199
                    }
                ];
                let xAxisData = echartData.map(v => v.name);
                //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                let yAxisData1 = echartData.map(v => v.value1);
                // [100, 138, 350, 173, 180, 150, 180, 230]
                let yAxisData2 = echartData.map(v => v.value2);
                // [233, 233, 200, 180, 199, 233, 210, 180]
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                }
                let option = {
                    color: color,
                    legend: {
                        right: 10,
                        top: 10,
                        show:false
                    },
                    tooltip: {
                        trigger: "axis",
                        // formatter: function(params) {
                        //     let html = '';
                        //     params.forEach(v => {
                        //         html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                        //         <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:transparent;"></span>
                        //         ${v.seriesName}.${v.name}
                        //         <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                        //         万元`;
                        //     })
                        //     return html
                        // },
                        // extraCssText: 'background: transparent; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                        // axisPointer: {
                        //     type: 'shadow',
                        //     shadowStyle: {
                        //         color: 'transparent',
                        //         shadowColor: 'rgba(225,225,225,1)',
                        //         shadowBlur: 5
                        //     }
                        // }
                    },
                    grid: {
                        top: "10%" ,
                        bottom: "-1%" ,
                        left:'2%',
                        right:'2%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}月',
                            
                                color: "#fff"
                            
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#1b4a6f"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e"
                            },
                            show:true
                        },
                        data: xAxisData
                    }],
                    yAxis: [{
                        type: "value",
                        name: '单位：万千瓦时',
                        axisLabel: {
                            color: "#fff"
                            
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e"
                            },
                            show:true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: "solid",
                                color: "#1b4a6f"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                        name: "2018",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: "#5bddcd",
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY:0
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: ctx.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [   {
                                            offset: 0, //RGB(91,221,205)
                                            color: 'rgba(91,221,205, 0.9)'
                                        },
                                        {
                                            offset: 0.5,
                                            color: 'rgba(91,221,205,0.5)'
                                        },
                                        {
                                            offset: 0.8,
                                            color: 'rgba(91,221,205,0.2)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'transparent'
                                        }
                                    ],
                                    false
                                ),
                                // shadowColor: hexToRgba(color[0], 0.1),
                                // shadowBlur: 0
                            }
                        },
                        data: yAxisData1
                    }
                   ]
                };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawTuopu(){
                var dom = document.getElementById("buildChart");
                var myChart = ctx.$echarts.init(dom);
                var nodes = [{
                        x: 500,
                        y: 1350,
                        nodeName: '应用',
                        svgPath: 'M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0,M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0',
                        symbolSize: 40,

                    }, {
                        x: 100,
                        y: 600,
                        nodeName: '模块1',
                        svgPath: 'M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z'
                    },
                    {
                        x: 500,
                        y: 600,
                        nodeName: '模块2',
                        svgPath: 'M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z'
                    },
                    {
                        x: 900,
                        y: 600,
                        nodeName: '模块3',
                        svgPath: 'M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z'
                    },
                    {
                        x: 0,
                        y: 100,
                        nodeName: '节点1',
                        svgPath: 'M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z',
                    },
                    {
                        x: 300,
                        y: 100,
                        nodeName: '节点2',
                        svgPath: 'M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z',
                    },
                    {
                        x: 700,
                        y: 100,
                        nodeName: '节点3',
                        svgPath: 'M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z',
                    },
                    {
                        x: 1000,
                        y: 100,
                        nodeName: '节点4',
                        svgPath: 'M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z',
                    },
                ]
                var charts = {
                    nodes: [],
                    linesData: [
                        {
                            coords: [
                                [500, 1000],
                                [500, 800],
                            ]
                        }, 
                        {
                            coords: [
                                [500, 800],
                                [100, 800],
                                [100, 600]

                            ]
                        }, 
                        {
                            coords: [
                                [500, 800],
                                [500, 600],

                            ]
                        }, 
                        {
                            coords: [
                                [500, 800],
                                [900, 800],
                                [900, 600]

                            ]
                        },
                        {
                            coords: [
                                [100, 600],
                                [0, 300]
                            ]
                        },
                        {
                            coords: [
                                [100, 600],
                                [300, 300]
                            ]
                        },
                        {
                            coords: [
                                [900, 600],
                                [700, 300]
                            ]
                        },
                        {
                            coords: [
                                [900, 600],
                                [1000, 300]
                            ]
                        }
                    ]
                }
                for (var j = 0; j < nodes.length; j++) {
                    const {
                        x,
                        y,
                        nodeName,
                        svgPath,
                        symbolSize
                    } = nodes[j];
                    var node = {
                        nodeName,
                        value: [x, y],
                        symbolSize: symbolSize || 40,
                        symbol: 'path://' + svgPath,
                        itemStyle: {
                            color: '#2adf4e',
                        }
                    }
                    charts.nodes.push(node)
                }
                let option = {
                    xAxis: {
                        min: 0,
                        max: 1000,
                        show: false,
                        type: 'value'
                    },
                    yAxis: {
                        min: 0,
                        max: 1000,
                        show: false,
                        type: 'value'
                    },
                    series: [{
                        type: 'graph',
                        coordinateSystem: 'cartesian2d',
                        label: {
                            show: true,
                            position: 'bottom',
                            color: '#2adf4e',
                            formatter: function(item) {
                                return item.data.nodeName
                            }
                        },
                        data: charts.nodes,
                    }, {
                        type: 'lines',
                        polyline: true,
                        coordinateSystem: 'cartesian2d',
                        lineStyle: {
                            type: 'dashed',
                            width: 2,
                            color: '#175064',
                            curveness: 0.3

                        },
                        effect: {
                            show: true,
                            trailLength: 0.1,
                            symbol: 'arrow',
                            color: '#2adf4e',
                            symbolSize: 8
                        },
                        data: charts.linesData
                    }]
                };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            onMounted(()=>{
                drawDuty()
                drawEvents()
                drawTyphoon()
                drawEventDown()
                drawTuopu()
            })
            return {
                numList,
                carouselList,
                options,
                optionValue
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
    .rightFx
        .todayDuty
            margin-top:vh(14)
            margin-bottom:vh(14)
            padding-top:vh(12)
            padding-left:vw(21)
            border:1px solid #063F61
            background:#061721
            height:vh(100)
            position:relative
            .dutyTitle
                text-align:center
                color:rgba(255,194,46,1) 
                font-size:vw(14)
                margin-bottom:vh(15)
            .dutyLoader
                padding-left:vw(21)
                display:flex
                div:nth-child(1)
                    font-size:vw(14)
                    margin-right:vw(58)
                    span:nth-child(2)
                        color: rgba(255,197,58,1)
                div:nth-child(2)
                    font-size:vw(14)
                    span:nth-child(2)
                        color: rgba(255,197,58,1)
            .dutyPerson
                padding-left:vw(21)
                margin-top:vh(15)
                font-size:vw(14)
            .selectContent
                position:absolute
                right:0
                bottom:v
                width:vw(85)
                height:vh(23)
        #dutyChart
            width:100%
            height:vh(130) 
        #eventChart
            width:100%
            height:vh(130)
        .typhoon
            display:flex
            width:100%
            height:vh(90)
            margin-top:vh(10)
            .typhoonDec
                flex:3
                height:vh(90)
                display:flex
                flex-direction: column
                justify-content:space-between
                font-size:vw(16)
                div:nth-child(1)
                    color:#fff
                    letter-spacing:1px
                    padding-top:vh(15)
                div:nth-child(2)
                    color:rgba(0,138,255,1)
                    font-size:vw(30)
            #typhoonTimes
                flex:7
                height:vh(90)
        .event
            display:flex
            margin-top:vh(10)
            .eventDec
                flex:3
                height:vh(90)
                display:flex
                flex-direction: column
                justify-content:space-between
                font-size:vw(16)
                div:nth-child(1)
                    color:#fff
                    letter-spacing:1px
                    padding-top:vh(15)
                div:nth-child(2)
                    color:rgba(69,206,132,1)
                    font-size:vw(30)
            #events
                flex:7
                height:vh(90)
                font-size:vw(30)
        #buildChart
            width:100%
            height:vh(204)
            margin-top:vh(10)
        .geoIntro
            width:vw(365)
            margin-top:vh(28)
            .geoIntroTitle
                margin-bottom:vh(13)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .geoIntroWord
                    color:#00EAFF
                    font-size:vw(16)
            .geoCarousel
                width: vw(365)
                height: vh(172)
                border: 1px solid #0c4259;
                padding-top:vh(8)
                padding-left:vw(8)
                .carouseContent
                    display:flex
                    .carouseImg 
                        flex-shrink:0 
                        width:vw(163)
                        height:vh(135)  
                        margin-right:vw(12)  
                        border:1px solid #ddd
                    .carouseWord
                        flex-shrink:0 
                        width:vw(168)
                        height:vh(139)  
                        padding:vh(12) vw(0)
                        line-height:vh(17)
</style>